<template>
  <view class="uni-container">
    <uni-forms ref="formRef" v-model="formData" :rules="rules" validateTrigger="blur">
      <uni-forms-item name="type" label="字典标识" required>
        <uni-easyinput v-model="formData.type" placeholder="请输入字典标识（如RecommendType）" />
      </uni-forms-item>
	  <uni-forms-item name="name" label="字典名称" required>
	    <uni-easyinput v-model="formData.name" placeholder="请输入字典名称" />
	  </uni-forms-item>
      <uni-forms-item name="status" label="启用状态">
        <switch @change="binddata('status', $event.detail.value)" :checked="formData.status" />
      </uni-forms-item>
      <uni-forms-item name="sort" label="排序">
        <uni-easyinput type="number" v-model="formData.sort" placeholder="请输入排序值（越大越靠前）" />
      </uni-forms-item>
      <view class="uni-button-group">
        <button style="width: 100px;" type="primary" class="uni-button"
          @click="submitForm">{{$t('common.button.submit')}}</button>
        <button style="width: 100px; margin-left: 15px;"
          class="uni-button" @click="navigateBack(false)">{{$t('common.button.back')}}</button>
      </view>
    </uni-forms>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import { useForm } from '@/utils/composable'
  
  const wallpaperObj = uniCloud.importObject("iss-wallpaper")
  const formRef = ref(null)
  
  // 表单数据
  const formData = ref({
    type: '',
	name:'',
    status: true,
    sort: 0
  })
  
  const rules = ref({
    type: {
      rules: [{
        required: true,
        errorMessage: '请输入{label}',
      }, {
        minLength: 2,
        maxLength: 50,
        errorMessage: '{label}长度在{minLength}到{maxLength}个字符'
      }],
      label: '字典标识'
    },
	name: {
	  rules: [{
	    required: true,
	    errorMessage: '请输入{label}',
	  },{
	    minLength: 2,
	    maxLength: 50,
	    errorMessage: '{label}长度在{minLength}到{maxLength}个字符'
	  }],
	  label: '分类名称'
	},
    sort: {
      rules: [{
        format: 'int',
        errorMessage: '{label}必须为整数'
      }],
      label: '排序'
    }
  })
  
  const {submitForm,navigateBack} = useForm({
    title: '数据字典',
    formRef,
    formData,
    doc: wallpaperObj.doc_dict,
    add: wallpaperObj.add_dict,
    update: wallpaperObj.update_dict
  })
</script>

<style lang="scss" scoped>
::v-deep .uni-forms-item__label {
  width: 90px !important;
}
</style>